<!-- 一键抢单 -->
<template>
	<!-- 通告栏 -->
	<uni-notice-bar background-color="#FFF5E5" color="#E1835B" single text="认真填写申请资料，争取拿下本悬赏！"></uni-notice-bar>
	<!-- 表单 -->
	<!-- 表单提交 -->
	<form class="form" @submit="sub">
		<view class="form-item">
			<view class="form-title">
				<view class="label"><text class="red">*</text>时长（天）</view>
				<view class="value">你需要多长时间完成？</view>
			</view>
			<view class="form-control">
				<input class="input" type="text" maxlength="1000" v-model="data.formData.time" name="task_time" placeholder="请输入时长" placeholder-class="placeholderStyle" @blur="changeTime($event,'time')">
			</view>
		</view>
		<view class="form-item">
			<view class="form-title">
				<view class="label"><text class="red">*</text>报价（元）</view>
				<view class="value">你期望获得多少报酬？</view>
			</view>
			<view class="form-control">
				<input class="input" type="text" maxlength="100000" v-model="data.formData.price" name="task_price" placeholder="请输入报价" placeholder-class="placeholderStyle" @blur="changePrice($event,'price')">
			</view>
		</view>
		<view class="form-item">
			<view class="form-title">
				<view class="label">说明</view>
				<view class="value">给甲方一个选择你的理由吧！</view>
			</view>
			<view class="form-control">
				<view class="textarea-wraper">
					<textarea class="textarea" maxlength="240" cursor-spacing="120px" v-model="data.formData.desc" name="task_intr" placeholder="填写你完成本悬赏的一些基本思路，或是你的资历、所获成就的介绍等，提升甲方选择你的意愿~" placeholder-class="placeholderStyle"></textarea>
					<view class="maxLength"><text>{{data.formData.desc.length}}/240</text></view>
				</view>
			</view>
		</view>
		<view class="form-submit">
			<view class="agreement" v-if="data.options&&data.options.type!='edit'">
				<text>提交即表示已阅读并同意</text>
				<navigator class="nav" :url="agreementUrl">悬赏发布及接单须知</navigator>
			</view>
			<button form-type="submit" :class="['btn btn-sub',{'btn-dis':!isEmptyFormData}]" hover-class="btnClickStyle">提交</button>
		</view>
	</form>
</template>
<script setup>
	import { reactive, computed, watch, getCurrentInstance } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { valid } from '@/subpages/common/utils/valid.js';
	import { isEmpty } from '@/common/utils/index.js';
	import { merchanttakeorders } from '@/subpages/common/api/task/order.js';
	import config from '@/uni.config.js';
	let eventChannel = null;
	const isEmptyFormData = computed(() => {
		return !isEmpty(data.formData.time) && !isEmpty(data.formData.price)
	});
	const agreementUrl = computed(() => {
		return `/subpages/web/web?url=${encodeURIComponent(config.article.orders)}`
	});
	onLoad((options) => {
		data.options = options;
		data.formData.price = options.price ? options.price : 0;
		const instance = getCurrentInstance().proxy;
		eventChannel = instance.getOpenerEventChannel();
	});
	const data = reactive({
		options: null,
		taskid: '', //任务id
		formData: {
			time: '3', //时间
			price: '', //期望报酬
			desc: '' //说明
		}
	});
	// 解决输入的BUG
	watch(() => data.formData.desc, (newVal) => {
		if (newVal.length >= 240) {
			setTimeout(() => {
				data.formData.desc = data.formData.desc.substring(0, 240);
			}, 10)
		}
	})
	// 时长处理
	function changeTime(e, type) {
		const value = (+e.detail.value);
		if (value > 0) data.formData[type] = value.toFixed(0);
	}
	// 价格处理
	function changePrice(e, type) {
		const value = (+e.detail.value);
		if (value >= 0 && (e.detail.value + '') != '' && /[.]/.test(value)) data.formData[type] = value.toFixed(2);
	}
	// 提交
	function sub(e) {
		let subData = e.detail.value;
		let rules = [{
			value: subData.task_time,
			null: '时长请填写1-1000的整数',
			dataType: '1-1000',
			error: '时长请填写1-1000的整数'
		}, {
			value: subData.task_price,
			null: '报价请填写0-100000的数字',
			dataType: '0-100000',
			error: '报价请填写0-100000的数字'
		}];
		if (!isEmpty(subData.task_intr)) {
			subData.task_intr = subData.task_intr;
			rules.push({
				value: subData.task_intr,
				dataType: '10-240',
				error: '若填写说明，请输入10-240个字符'
			})
		}
		const dataTypes = { dataTypes: { '1-1000': /^(\+?[1-9]\d{0,2}|\+?1000)$/, '0-100000': /(^(0|[1-9]|[1-9][0-9]{1,4})(\.\d{1,2})?$)|(^100000$)/, '10-240': /^[\w\W]{10,240}$/, tip: 1 } };
		valid(rules, dataTypes).then(res => {
			subReq(subData);
		})
	}
	// 提交请求
	async function subReq(params) {
		params.taskid = data.options.id;
		await merchanttakeorders(params);
		eventChannel.emit('acceptDataFromOpenedPage', { type: 'getorder', value: 1 });
		setTimeout(() => {
			uni.navigateBack();
		}, 600)
	}
</script>
<style lang="scss">
	@import '@/common/css/base.scss';
	page {
		padding-bottom: 140rpx;
		background-color: $bgColor;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	@import '@/common/css/form.scss';
</style>
